import React,{useState,useEffect} from 'react'
import { Tabs ,Image, Swiper } from 'react-vant'
import axios from 'axios'
// 在create-react-app 中 webpack可以解析scss ， 需要npm i sass scss-loader
// css 预处理工具用scss ，不用less，less去改webpack非常麻烦

const Mystyle = {
    "width":"100%",
    "height":"100%"
}
// 比如知道了分页一共有五页，5，只知道一个数组，要变成一个数组渲染
// 此时，就要用Array.from({ length: 3 }, (_, i) => i + 1)
// let arr = Array.from({ length: 5 }, (_, i) => i + 1)

function App() {
  let [arr,setArr] = useState([])
  let [imgarr, setImgarr] = useState([])
  useEffect(()=>{
    axios.get("/api/list").then(res=>{
        console.log(res.data);
        setArr(res.data)
    })
    axios.get("/api/imglist").then(res=>{
        console.log(res.data);
        setImgarr(res.data)
    })
  },[])
  return (
    // 如果外层使用了item,里层尽量区分
    <div style={Mystyle}>
         <Swiper>
        {imgarr.map((item,index) => (
          <Swiper.Item key={index}>
            <Image lazyload src={item} />
          </Swiper.Item>
        ))}
      </Swiper>
        <Tabs defaultActive={2}>
        { 
          arr && arr.length ?  arr.map((item,index) => (
          <Tabs.TabPane key={index} title={item.name}>
             {
                 item.children.map((ite,ind)=>{
                     return <dl key={ind}>
                         <dt>
                         <Image src={ite.img} lazyload={true} errorIcon={<div style={{ fontSize: 14 }}>加载失败</div>}/>
                         </dt>
                         <dd>{ite.tit}</dd>
                     </dl>
                 })
             }
          </Tabs.TabPane>
        )):""
    }
      </Tabs>
       
    </div>
  )
}

export default App